import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, Select, InputNumber } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
const { Option } = Select;

export default function Search(props) {
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();

  const getFields = () => {
    return (
      <>
        <Col span={20}>
          <Form.Item name="shopName" label="商铺名称">
            <Input placeholder="请输入商铺名字" />
          </Form.Item>
        </Col>
        <Col span={10}>
          <Form.Item name="status" label="商铺状态">
            <Select defaultValue="all">
              <Option value="all">展示所有数据</Option>
              <Option value="2">启用</Option>
              <Option value="1">停用</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={10}>
          <Form.Item name="prestige" label="信誉值">
            <InputNumber min={1} max={100} /> ~<InputNumber min={1} max={100} />
          </Form.Item>
        </Col>
      </>
    );
  };

  const onFinish = (values) => {
    props.searchData({
      shopName: values.shopName,
      status: values.status,
    });
    // console.log({
    //     shopName: values.shopName,
    //     status:values.status
    //  });
  };
  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
      style={{ marginBottom: '20px' }}
    >
      <Row gutter={24}>
        {getFields()}
        <Col
          // span={30}
          style={{
            textAlign: 'right',
          }}
        >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => {
              form.resetFields();
            }}
          >
            清空
          </Button>
          {/* <a
                        style={{
                            fontSize: 12,
                        }}
                        onClick={() => {
                            setExpand(!expand);
                        }}
                    >
                        {expand ? <UpOutlined /> : <DownOutlined />} 展开
                    </a> */}
        </Col>
      </Row>
      <Row></Row>
    </Form>
  );
}
